百度地图在wordpress上的使用，wordpress添加地图插件

2017-10-20

使用插件：WP Baidu Map
在文章编辑页中，添加代码

1	[baidu_map id="map_1508394094" w="100%" h="100% lat="35" lon="135" biz_name="" address="郑州人民公园" email="" phone=""]

或者编辑文章时，点击按钮添加地图。

由于，我想实现的功能是:根据ip显示用户位置，和显示指定地点的位置。并按照两者之间的距离，自动缩放比例。
因此，我需要修改插件代码。

修改部分：
1.ak 的值

1 2	/百度地图AK , 请在 http://lbsyun.baidu.com/apiconsole/key 这里申请,免费的。/ public static $ak = '5upeZi9ESotIhhBvDkERXuUB';

2.地图部分的css部分.由于使用的主题，和插件有冲突。所以使用!important 更改了权重。

<style>
            div#<?php echo esc_attr($id) ?> {display: block !important;}
            #<?php echo esc_attr($id) ?> {width:<?php echo $w ?>; height:<?php echo $h ?>;overflow: hidden;margin:0;}
            #l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
            #r-result{height:100%;width:20%;float:left;}
            .mywindow{ height:auto; width:auto; font-size:12px; line-height:22px;}
            .mylocationcontainer{width:100%; height:100%; margin:0 auto;}
            .map img{width:100%;height:100%;padding: 0px !important; background-color:transparent}
           .BMap_cpyCtrl span,.anchorBL{display:none!important;}
</style>

3.显示自己当前的位置（根据浏览器ip）

// 定位个人位置 并做标记marker
     var geolocation = new BMap.Geolocation();
     geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                var mk = new BMap.Marker(r.point);
                // map.addOverlay(mk);
                // map.panTo(r.point);
                var selfpoint = new BMap.Point(r.point.lng,r.point.lat);
               // alert('您的位置：'+r.point.lng+','+r.point.lat);
                var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157));
                var selfmarker = new BMap.Marker(selfpoint,{icon:myIcon}); 
                // map<?php echo esc_attr($id) ?>.centerAndZoom(point, 9);
                map<?php echo esc_attr($id) ?>.addOverlay(selfmarker);
                var zoom = getZoom(<?php echo $lon ?>, r.point.lng, <?php echo $lat ?>, r.point.lat);
                var cenLng =(parseFloat(r.point.lng)+parseFloat(<?php echo $lon ?>))/2;  
                var cenLat = (parseFloat(r.point.lat)+parseFloat(<?php echo $lat ?>))/2;    
                map<?php echo esc_attr($id) ?>.centerAndZoom(new BMap.Point(cenLng,cenLat), zoom);  
            }
            else {
                //alert('failed'+this.getStatus());
            }        
        },{enableHighAccuracy: true})

修改后的代码：
wp-baidu-map.php 文件（可以直接在已安装插件中编辑代码）

<?php
/*
Plugin Name:WP Baidu Map
Plugin URI: https://coolwp.com/wp-baidu-map.html
Description: A real Baidu map plugin.
Author:suifengtec
Version: 1.1
Author URI: https://coolwp.com
*/
/*
1.0 : 初始发布;
1.1 : 添加编辑器按钮插入;支持将输入的地址转换为百度地图的坐标;代码优化;支持在同一页面显示N多地图;
 */
defined('ABSPATH') || exit;
if(!class_exists('WP_Baidu_Maps')):
class WP_Baidu_Maps{
    /*百度地图AK , 请在 http://lbsyun.baidu.com/apiconsole/key 这里申请,免费的。*/
    public static $ak = '5upeZi9ESotIhhBvDkERXuUB';
    private static $instance;
    public function __wakeup() {}
    public function __clone() {}
    public function __construct(){ }
    public static function instance() {
        if ( ! isset( self::$instance ) && ! ( self::$instance instanceof WP_Baidu_Maps ) ) {
            self::$instance = new self();
            self::$instance->hooks();
        }
        return self::$instance;
    }
    
    public function hooks(){
        add_action('init', array( $this, 'add_shortcode' ) );
        add_action('admin_init', array ( __CLASS__, 'add_insert_btn' ) );
    }
    public static function add_insert_btn(){
/*        if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
            return;
        }*/
        add_filter('mce_buttons', array(__CLASS__,'register_baidumap_button'));
        add_filter('mce_external_plugins', array(__CLASS__,'add_baidumap_button_plugin'));
    }
    public static function register_baidumap_button( $buttons ) {
        array_push( $buttons, "|", "baidumap" );
        return $buttons;
    }
    public static function add_baidumap_button_plugin($plugin_array){
        echo '<script>var baiduMapAK ="'.self::$ak.'";</script>';
        $plugin_array['baidumap'] =  plugins_url('js/baidu-map.js',__FILE__);
        return $plugin_array;
    }
    public  function add_shortcode(){
        add_shortcode('baidu_map', array( __CLASS__ ,'add_sc' ) );
    }
    public  function add_sc( $atts= array(), $content='' ){
        extract(shortcode_atts(array(
            'id'=>'',
            'w'=>'',
            'h'=>'',
            'lon'=>'',
            'lat'=>'',
            'biz_name'=>'',
            'address'=>'',
            'email'=>'',
            'phone'=>'',
            'ak'=> self::$ak,
            ) ,$atts));
        $id = $id?$id:'wp-baidu-map';
        $w = $w?$w:'100%';
        $h = $h?$h:'400px';
        $biz_name = $biz_name?$biz_name:false;
        $lon = $lon?$lon:false;
        $lat = $lat?$lat:false;
        $address = $address?$address:false;
        $email = $email?$email:false;
        $phone = $phone?$phone:false;
        if(!$lon||!$lat){
            return '设置经纬度后才能显示地图哦！';
        }
        ob_start();
        ?>
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<?php echo $ak?>"></script>
        <style>
            div#<?php echo esc_attr($id) ?> {display: block !important;}
            #<?php echo esc_attr($id) ?> {width:<?php echo $w ?>; height:<?php echo $h ?>;overflow: hidden;margin:0;}
            #l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
            #r-result{height:100%;width:20%;float:left;}
            .mywindow{ height:auto; width:auto; font-size:12px; line-height:22px;}
            .mylocationcontainer{width:100%; height:100%; margin:0 auto;}
            .map img{width:100%;height:100%;padding: 0px !important; background-color:transparent}
           .BMap_cpyCtrl span,.anchorBL{display:none!important;}
        </style>
        <div class="map"><div id="<?php echo esc_attr($id) ?>"></div></div>
        <script type="text/javascript">
            var map<?php echo esc_attr($id) ?> = new BMap.Map("<?php echo esc_attr($id) ?>");
            var point = new BMap.Point(<?php echo $lon ?>,<?php echo $lat ?>);
            map<?php echo esc_attr($id) ?>.enableScrollWheelZoom(true);
            map<?php echo esc_attr($id) ?>.enableContinuousZoom();
            map<?php echo esc_attr($id) ?>.addControl(new BMap.NavigationControl());
            var marker = new BMap.Marker(point);
            marker.setAnimation(BMAP_ANIMATION_BOUNCE);
            var sContent ='<div class="mywindow"><?php echo $biz_name ?><?php if(!empty($address)){echo '<br>地址：'.$address;} ?><?php if(!empty($phone)){echo '<br>电话：'.$phone;} ?><?php if(!empty($email)){echo '<br>电邮：'.$email;} ?></div>';
            var infoWindow = new BMap.InfoWindow(sContent);
            map<?php echo esc_attr($id) ?>.centerAndZoom(point, 9);
            map<?php echo esc_attr($id) ?>.addOverlay(marker);
            marker.addEventListener("click", function(){
               this.openInfoWindow(infoWindow);
               window.onload = function (){
                   infoWindow.redraw();
               }
            });
    // 定位个人位置 并做标记marker
            var geolocation = new BMap.Geolocation();
	        geolocation.getCurrentPosition(function(r){
                if(this.getStatus() == BMAP_STATUS_SUCCESS){
                    var mk = new BMap.Marker(r.point);
                    // map.addOverlay(mk);
                    // map.panTo(r.point);
                    var selfpoint = new BMap.Point(r.point.lng,r.point.lat);
                   // alert('您的位置：'+r.point.lng+','+r.point.lat);
                    var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157));
                    var selfmarker = new BMap.Marker(selfpoint,{icon:myIcon}); 
                    // map<?php echo esc_attr($id) ?>.centerAndZoom(point, 9);
                    map<?php echo esc_attr($id) ?>.addOverlay(selfmarker);
                    var zoom = getZoom(<?php echo $lon ?>, r.point.lng, <?php echo $lat ?>, r.point.lat);
                    var cenLng =(parseFloat(r.point.lng)+parseFloat(<?php echo $lon ?>))/2;  
                    var cenLat = (parseFloat(r.point.lat)+parseFloat(<?php echo $lat ?>))/2;    
                    map<?php echo esc_attr($id) ?>.centerAndZoom(new BMap.Point(cenLng,cenLat), zoom);  
                }
                else {
                    //alert('failed'+this.getStatus());
                }        
            },{enableHighAccuracy: true})
            //根据经纬极值计算绽放级别。  
        function getZoom (maxLng, minLng, maxLat, minLat) {  
            var zoom = ["50","100","200","500","1000","2000","5000","10000","20000","25000","50000","100000","200000","500000","1000000","2000000"]//级别18到3。  
            var pointA = new BMap.Point(maxLng,maxLat);  // 创建点坐标A  
            var pointB = new BMap.Point(minLng,minLat);  // 创建点坐标B  
            var distance = map<?php echo esc_attr($id) ?>.getDistance(pointA,pointB).toFixed(1);  //获取两点距离,保留小数点后两位  
            for (var i = 0,zoomLen = zoom.length; i < zoomLen; i++) {  
                if(zoom[i] - distance > 0){  
                    return 18-i+3;//之所以会多3，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。  
                }  
            };  
    }  
        </script>
       <?php
        $output = ob_get_clean();
        return $output;
    }
    
}
$GLOBALS['wp_baidu_map'] = WP_Baidu_Maps::instance();
endif;